<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type='text/javascript' src='../vue.js'></script>
    
</head>
<body>
    <div id="root">
       
    </div>

    <script type='text/javascript'>
   
        const student = Vue.extend({
             // template配置项 必须且只能有 一个 根节点
            template:`<div> 
                    <h3>学生姓名:{{name}}</h3>
                    <h3>学生年龄:{{age}}</h3>
                </div>`,
            data(){
                return {
                    name: "马化云",
                    age: "54"
                }
            }
        })
        //创建组件简写: 只传入一个配置项对象
        const school = {
            template:`<div>
                <h1>{{schoolName}}</h1>
                <h2>{{schoolAddress}}</h2>
                <student></student>
            </div>`,
            data:function(){
               return {
                    schoolName: "深圳大学",
                    schoolAddress: "深南大道1203号"
                }
            },
            components:{
                student
            } 
        }

        const app = {
            // template配置项 必须且只能有 一个 根节点,因为只有一个<school>
            // 所以他就是 root element 不需要添加 <div><\div> 包裹

            template:`
                    <school></school>
                    `,
            components:{
                school
            }
        }

        new Vue({ 
            el: '#root',
            template:`<app></app>`,
            components:{
                app
            }
        })

    </script>
    
</body>
</html>